<template>
  <div id="app">
    <div class="content-header">
      <h1>图书管理</h1>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="filter-container">
          <el-input placeholder="图书名称" v-model="pagination.name" style="width: 200px;" class="filter-item"></el-input>
          <el-input placeholder="作者" v-model="pagination.author" style="width: 200px;" class="filter-item"></el-input>
          <el-input placeholder="单价" v-model="pagination.price" style="width: 200px;" class="filter-item"></el-input>
          <el-button @click="getSelect()" class="dalfBut">查询</el-button>
          <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
        </div>
        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column prop="name" label="图书名称" align="center"></el-table-column>
          <el-table-column prop="author" label="作者" align="center"></el-table-column>
          <el-table-column prop="price" label="单价" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!--elementui中将表格的行封装为scope ，scope.row就是一行的数据-->
              <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <div class="pagination-container">
          <el-pagination
              class="pagiantion"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pagination.total">
          </el-pagination>

        </div>
        <!-- 新增标签弹层 -->
        <div class="add-form">
          <el-dialog title="新增图书" :visible.sync="dialogFormVisible">
            <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="图书名称" prop="name">
                    <el-input v-model="formData.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="作者" prop="author">
                    <el-input v-model="formData.author"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="价格">
                    <el-input v-model="formData.price" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取消</el-button>
              <el-button type="primary" @click="handleAdd()">确定</el-button>
            </div>
          </el-dialog>

        </div>
        <!-- 编辑标签弹层 -->
        <div class="add-form">
          <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="图书名称" prop="name">
                    <el-input v-model="formData.name"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="作者" prop="author">
                    <el-input v-model="formData.author"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="价格">
                    <el-input v-model="formData.price" type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取消</el-button>
              <el-button type="primary" @click="handleEdit()">确定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import('./css/style.css')
  import('./assets/font-awesome/css/font-awesome.min.css')
  import {request} from "@/network/request";

  export default {
    data(){
      return{
        dataList: [],//当前页要展示的列表数据
        dialogFormVisible: false,//添加表单是否可见
        dialogFormVisible4Edit:false,//编辑表单是否可见
        formData: {},//表单数据
        pagination: {//分页相关模型数据
          currentPage: 1,//当前页码
          pageSize:5,//每页显示的记录数
          total:0,//总记录数
          //下面用于查询
          author: "",
          name: "",
          price: ''
        }
      }
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created() {
      //调用查询全部数据的操作
      this.getAll();
    },
    methods: {
      //分页查询
      // getAll() {
      //   request({
      //     url: '/books'
      //   }
      //   ).then(res => {
      //     //console.log(res.data)
      //     //res自己里面带data，我定义的R数据结构里也有data，所以写两个data
      //     this.dataList=res.data.data;
      //   })
      // },
      getSelect(){
        let param='?name='+this.pagination.name;
        param+='&author='+this.pagination.author;
        param+='&price='+this.pagination.price;
        request({
          url: '/books/'+this.pagination.currentPage+'/'+this.pagination.pageSize+'/s=1'+param,
          method: 'get'
        }).then((res)=>{
          this.dataList=res.data.data.records;
          this.pagination.pageSize=res.data.data.size;
          this.pagination.currentPage=res.data.data.current;
          this.pagination.total=res.data.data.total;
        })
      },
      getAll(){

        request({
          url: '/books/'+this.pagination.currentPage+'/'+this.pagination.pageSize,
          method: 'get'
        }).then((res)=>{
          this.dataList=res.data.data.records;
          this.pagination.pageSize=res.data.data.size;
          this.pagination.currentPage=res.data.data.current;
          this.pagination.total=res.data.data.total;
        })
      },
      //切换页码
      handleCurrentChange(currentPage){
        this.pagination.currentPage=currentPage;
        this.getAll();
      },
      //新建弹层
      handleCreate(){
        this.dialogFormVisible=true;
        this.resetForm();
      },
      //重置表单数据
      resetForm(){
        this.formData={};
      },
      //新建弹层中的添加按钮
      handleAdd(){
        request({
          url: '/books',
          method: 'post',
          data: this.formData
        }).then((res)=>{
          //若请求添加失败，则不关弹层
          if(res.data.flag===true){
            //msg:"添加成功" 将返回信息统一交由后端管理，当然前端也行，统一就好，这里举个例子
            this.$message.success(res.data.msg)
            this.dialogFormVisible=false;
          }else{
            //msg:"添加失败"
            this.$message.error(res.data.msg)
          }
        }).finally(
            ()=>{
              //重新加载数据
              this.getAll();
            }
        )
      },
      //新建弹层中的取消按钮
      cancel(){
        this.dialogFormVisible=false;
        this.dialogFormVisible4Edit=false;
        this.$message.info("当前操作取消！！！")
      },
      //删除
      handleDelete(row){
        console.log(row);
        this.$confirm("此操作永久删除当前信息，是否继续","提示",{type:"info"}).then(()=>{
          request({
            url: '/books/'+row.id,
            method: 'delete'
          }).then((res)=>{
            if(res.data.flag===true){
              this.$message.success("删除成功！！！")
            }else{
              this.$message.error("删除失败！！！")
            }
          }).finally(()=>{
            this.getAll();
          })
        }).catch(()=>{
          this.$message.info("取消删除操作")
        })
      },
      //总的修改操作
      handleUpdate(row){
        request({
          url: '/books/'+row.id,
          method: 'get',
        }).then((res)=>{
          if(res.data.flag===true&&res.data.data!=null){
            this.formData=res.data.data;
            this.dialogFormVisible4Edit=true;
          }else{
            this.$message.info("数据同步失败，自动刷新")
          }

        }).finally(()=>{
          this.getAll();
        })
      },
      //真正的修改操作
      handleEdit(){
        request({
          url: '/books/',
          method: 'put',
          data: this.formData
        }).then((res)=>{
          if(res.data.flag===true){
            this.dialogFormVisible4Edit=false;
            this.$message.success("修改成功！！！")
          }else{
            this.$message.error("修改失败！！！")
          }
        }).finally(()=>{
          this.getAll();
        })
      },
    }
  }
</script>

